<template>
  <div class="cinema_container" :style="{height: cinemaheight}">
    <ul>
      <li v-for="data in datalist" :key="data.cinemaId">
        {{ data.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import BetterScroll from 'better-scroll'

export default {
  name: 'Cinema',
  data () {
    return {
      datalist: [],
      cinemaheight: '0px'
    }
  },
  mounted () {
    this.cinemaheight = document.documentElement.clientHeight - 50 + 'px'
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=3021476',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16318468911969714951618561","bc":"110100"}',
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res => {
      console.log(res.data)
      this.datalist = res.data.data.cinemas// 数据请求回来了

      this.$nextTick(() => {
        // 等待dom更新完毕
        // eslint-disable-next-line no-new
        const myscroll = new BetterScroll('.cinema_container', {
          scrollbar: {
            fade: true,
            interactive: false
          },
          pullUpLoad: {
            threshold: 50
          }
        })

        myscroll.on('pullingUp', () => {
          console.log('pullingUp')
          this.datalist.push({
            cinemaId: '123344',
            name: 'aaaa'
          })
          myscroll.refresh()
        })
      })
    })
  }
}
</script>

<style scoped lang="scss">
li {
  height: 50px;
}

.cinema_container {
  overflow: hidden;
  position: relative;
}
</style>
